<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1 ,user-scalable=no">
	<style>
		/* css 代码  */
	</style>
	<script src="https://code.highcharts.com.cn/highcharts/9.3.2/highcharts.js"></script>
<!--	<script src="no-data-to-display.js"></script>-->
	<script type="text/javascript">
		Highcharts.setOptions({ global: { useUTC: false } });
	</script>
	<title>血糖曲线图</title>
	<style type="text/css">
		body{
			font-family: "微软雅黑";
			font-size:.38rem;
			max-width:1080px;
			min-width:320px;
			margin:0 auto;
			color: #333333;
		}
		div.title{
			vertical-align: middle;
			text-align: center;
			margin-bottom: 0.12rem;
			margin-top: 0.52rem;
		}
		span{
			display: inline-block;
			vertical-align: middle;
			font-size: 0.36rem;
			padding: 0;
			margin:0;
		}
		span.solid{
			height: 0.36rem;
			width: 0.5rem;
			border-radius: 0.08rem;
			margin:0.1rem 0.3rem 0 0.15rem;

		}
		.yellow{
			background: #feb433;
		}
		.blue{
			background: #87ceea;
		}
		.red{
			background: #e64a4a;
		}
	</style>
</head>
<body id="parent_container" bgcolor="#ffffff">
<div class="title">
<span>0.0-4.4</span>
<span class="solid yellow"></span>
<span>4.4-7.8</span>
<span class="solid blue"></span>
<span>>7.8</span>
<span class="solid red"></span>
</div>
<div id="container" style="min-width:310px;height:190px;margin: 0 auto"></div>
<script>
	Highcharts.setOptions({
		lang:{
			drillUpText:"返回 {series.name}",
			loading:"加载中",
			noData:"暂时还没有记录哦~",
			resetZoom:"重置",
			resetZoomTitle:"恢复图表",
			thousandsSep:","
		}
	});
	var chart = Highcharts.chart('container', {
		chart: {
			type: 'spline',
			margin:[5,35,50,35],
			reflow:true,
			panning: true,
			panKey: 'shift',
			backgroundColor:'#ffffff'
		},
		credits:{
			enabled: false
		},
		title: {
			text:''
		},
		xAxis: {
			minPadding:0,
			startOnTick:false,
			endOnTick:false,
			gridLineWidth: 1,
			endOnTick:false,
			tickmarkPlacement:'on',
			type:'category',
			tickPosition:'inside',
			categories:['08/01','08/02','08/03','08/04','08/05','08/06','08/07','08/08'],
			// TODO
			// categories:[{$xCategories}],
			dateTimeLabelFormats: {
				minute: '%m/%d %H:%M',
				hour: '%m/%d %H:%M',
				day: '%m/%d',
				week: '%m/%d',
				month: '%m/%d',
				year: '%m/%d'
			}
		},
		yAxis: {
			type:'category',
			min:1.3,
			title: {
				align: 'high',
				offset: 0,
				text: 'mmol/L',
				rotation: 0,
				y: -10,
				x:30
			},
			startOnTick:false,
			endOnTick:true,
			plotLines: [
				{
				color: '#f41337',
				dashStyle: 'Dash',
				width: 1.2,
				value: 7.8,
				zIndex: 5,
				text: '7.8',
				label: {
					text: '7.8',
					align: 'right',
					x: 20,
					y: 3,
					style: {
						color: '#4aa4fc',
						fontSize: '8px'
					}
				},
			},  {
				color: '#ff8900',
				dashStyle: 'Dash',
				width: 1.2,
				value: 3.9,
				zIndex: 5,
				text: '4.4',
				label: {
					text: '4.4',
					align: 'right',
					x: 20,
					y: 3,
					style: {
						color: '#ff8900',
						fontSize: '8px'
					}
				},
			}]
		},
		plotOptions: {
			line: {
				enableMouseTracking: true
			}
		},
		tooltip:{
			enabled:false
		},
		legend: {
			enabled:false,
		},
		series: [{
			name:'血糖',
			// data: [[5.6,'08/01'],[7.8,'08/01'],[4.5,'08/01'],[3.9,'08/01'],[9.1,'08/01'],[6.8,'08/01'],[8.2,'08/01'],[6.5,'08/01']],
			data: [5.6,7.8,4.5,3.9,9.1,6.8,8.2,6.5],
			// TODO
			// data: [{$values}],
			marker:{
				symbol:'circle',
				radius:3
			},
			zones: [{
				value: 4.4,
				color: '#feb433',
			}, {
				value: 7.8,
				color: '#87ceea'
			},{
				color: '#e64a4a'
			},],
			showInLegend: false
		}],
		noData: {
			style: {
				fontWeight: 'bold',
				fontSize: '15px',
				color: '#f00'
			}
		}
	});
</script>

<!--<script language="javascript">-->
<!--	var containerHeight = {$AndroidContainerHeight};-->
<!--	var containerWidth = {$AndroidContainerWidth};-->
<!--	var width = document.body.clientWidth;-->
<!--	var height = width * containerHeight / containerWidth;-->
<!--	var s = height + "px";-->
<!--	document.getElementById('parent_container').style.height = s;-->
<!--	console.log("containerWidth=%1d,containerHeight=%2d,width=%3d,height=%4d",containerWidth,-->
<!--		containerHeight,width,height);-->
<!--</script>-->
</body>
</html>
